<div class="row">
    <div class="col-md-12">
        <div class="alert alert-warning">
            <h4 class="block">引入ECharts</h4>
            <p> echarts提供多种引入方式，包括模块化包、模块化单文件和标签式单文件。我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。下面例子为了演示方便，使用标签式单文件引入方式，更多参考官方
                <a href="http://echarts.baidu.com/doc/doc.html" target="_blank">ECharts文档</a>。
            </p>
        </div>

        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-globe"></i>iphone销量地图
                </div>
            </div>
            <div class="portlet-body">
                <div id="earthChart" style="height:400px;"></div>
            </div>
        </div>
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-line-chart"></i>折线图
                </div>
            </div>
            <div class="portlet-body">
                <div id="lineChart" style="height:400px;"></div>
            </div>
        </div>
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-bar-chart"></i>柱状图
                </div>
            </div>
            <div class="portlet-body">
                <div id="barChart" style="height:400px;"></div>
            </div>
        </div>
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-pie-chart"></i>饼状图
                </div>
            </div>
            <div class="portlet-body">
                <div id="pieChart" style="height:400px;"></div>
            </div>
        </div>
        <div class="mu-tabbable border-remove">
            <ul class="nav nav-tabs ">
                <li class="active"><a href="#tab_5_1" data-toggle="tab">Javascript</a>
                </li>
                <li><a href="#tab_5_2" data-toggle="tab">Html</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab_5_1">
                    <pre class="prettyprint">
var earthChart = echarts.init(document.getElementById('earthChart'));
var option = {
    title: {
        text: 'iphone销量',
        subtext: '纯属虚构',
        x: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data: ['iphone3', 'iphone4', 'iphone5']
    },
    dataRange: {
        min: 0,
        max: 2500,
        x: 'left',
        y: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        x: 'right',
        y: 'center',
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    roamController: {
        show: true,
        x: 'right',
        mapTypeControl: {
            'china': true
        }
    },
    series: [{
        name: 'iphone3',
        type: 'map',
        mapType: 'china',
        roam: false,
        itemStyle: {
            normal: {
                label: {
                    show: true
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: [{
            name: '北京',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '天津',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '上海',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '重庆',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '河北',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '河南',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '云南',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '辽宁',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '黑龙江',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '湖南',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '安徽',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '山东',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '新疆',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '江苏',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '浙江',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '江西',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '湖北',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '广西',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '甘肃',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '山西',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '内蒙古',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '陕西',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '吉林',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '福建',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '贵州',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '广东',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '青海',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '西藏',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '四川',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '宁夏',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '海南',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '台湾',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '香港',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '澳门',
            value: Math.round(Math.random() * 1000)
        }]
    }, {
        name: 'iphone4',
        type: 'map',
        mapType: 'china',
        itemStyle: {
            normal: {
                label: {
                    show: true
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: [{
            name: '北京',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '天津',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '上海',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '重庆',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '河北',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '安徽',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '新疆',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '浙江',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '江西',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '山西',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '内蒙古',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '吉林',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '福建',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '广东',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '西藏',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '四川',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '宁夏',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '香港',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '澳门',
            value: Math.round(Math.random() * 1000)
        }]
    }, {
        name: 'iphone5',
        type: 'map',
        mapType: 'china',
        itemStyle: {
            normal: {
                label: {
                    show: true
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: [{
            name: '北京',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '天津',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '上海',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '广东',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '台湾',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '香港',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '澳门',
            value: Math.round(Math.random() * 1000)
        }]
    }]
};


                        </pre>
                </div>
                <div class="tab-pane" id="tab_5_2">
                    <pre class="prettyprint">
&lt;div id="earthChart" style="height:400px;"&gt;&lt;/div&gt;
                    </pre>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../assets/plugins/echart/echarts-all.js"></script>
<script>
var earthChart = echarts.init(document.getElementById('earthChart'));
var option = {
    title: {
        text: 'iphone销量',
        subtext: '纯属虚构',
        x: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data: ['iphone3', 'iphone4', 'iphone5']
    },
    dataRange: {
        min: 0,
        max: 2500,
        x: 'left',
        y: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        x: 'right',
        y: 'center',
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    roamController: {
        show: true,
        x: 'right',
        mapTypeControl: {
            'china': true
        }
    },
    series: [{
        name: 'iphone3',
        type: 'map',
        mapType: 'china',
        roam: false,
        itemStyle: {
            normal: {
                label: {
                    show: true
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: [{
            name: '北京',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '天津',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '上海',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '重庆',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '河北',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '河南',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '云南',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '辽宁',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '黑龙江',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '湖南',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '安徽',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '山东',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '新疆',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '江苏',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '浙江',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '江西',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '湖北',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '广西',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '甘肃',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '山西',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '内蒙古',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '陕西',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '吉林',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '福建',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '贵州',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '广东',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '青海',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '西藏',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '四川',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '宁夏',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '海南',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '台湾',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '香港',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '澳门',
            value: Math.round(Math.random() * 1000)
        }]
    }, {
        name: 'iphone4',
        type: 'map',
        mapType: 'china',
        itemStyle: {
            normal: {
                label: {
                    show: true
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: [{
            name: '北京',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '天津',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '上海',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '重庆',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '河北',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '安徽',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '新疆',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '浙江',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '江西',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '山西',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '内蒙古',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '吉林',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '福建',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '广东',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '西藏',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '四川',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '宁夏',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '香港',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '澳门',
            value: Math.round(Math.random() * 1000)
        }]
    }, {
        name: 'iphone5',
        type: 'map',
        mapType: 'china',
        itemStyle: {
            normal: {
                label: {
                    show: true
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: [{
            name: '北京',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '天津',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '上海',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '广东',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '台湾',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '香港',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '澳门',
            value: Math.round(Math.random() * 1000)
        }]
    }]
};


earthChart.setOption(option);

var lineChart = echarts.init(document.getElementById('lineChart'));
var option = {
    title: {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['最高气温', '最低气温']
    },
    toolbox: {
        show: true,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            magicType: {
                show: true,
                type: ['line', 'bar']
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }],
    yAxis: [{
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    }],
    series: [{
        name: '最高气温',
        type: 'line',
        data: [11, 11, 15, 13, 12, 13, 10],
        markPoint: {
            data: [{
                type: 'max',
                name: '最大值'
            }, {
                type: 'min',
                name: '最小值'
            }]
        },
        markLine: {
            data: [{
                type: 'average',
                name: '平均值'
            }]
        }
    }, {
        name: '最低气温',
        type: 'line',
        data: [1, -2, 2, 5, 3, 2, 0],
        markPoint: {
            data: [{
                name: '周最低',
                value: -2,
                xAxis: 1,
                yAxis: -1.5
            }]
        },
        markLine: {
            data: [{
                type: 'average',
                name: '平均值'
            }]
        }
    }]
};

lineChart.setOption(option);

var barChart = echarts.init(document.getElementById('barChart'));
var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        x: 'right',
        y: 'center',
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            magicType: {
                show: true,
                type: ['line', 'bar']
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    xAxis: [{
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
        name: '直接访问',
        type: 'bar',
        data: [320, 332, 301, 334, 390, 330, 320]
    }, {
        name: '邮件营销',
        type: 'bar',
        stack: '广告',
        data: [120, 132, 101, 134, 90, 230, 210]
    }, {
        name: '联盟广告',
        type: 'bar',
        stack: '广告',
        data: [220, 182, 191, 234, 290, 330, 310]
    }, {
        name: '视频广告',
        type: 'bar',
        stack: '广告',
        data: [150, 232, 201, 154, 190, 330, 410]
    }, {
        name: '搜索引擎',
        type: 'bar',
        data: [862, 1018, 964, 1026, 1679, 1600, 1570],
        markLine: {
            itemStyle: {
                normal: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            data: [
                [{
                    type: 'min'
                }, {
                    type: 'max'
                }]
            ]
        }
    }, {
        name: '百度',
        type: 'bar',
        barWidth: 5,
        stack: '搜索引擎',
        data: [620, 732, 701, 734, 1090, 1130, 1120]
    }, {
        name: '谷歌',
        type: 'bar',
        stack: '搜索引擎',
        data: [120, 132, 101, 134, 290, 230, 220]
    }, {
        name: '必应',
        type: 'bar',
        stack: '搜索引擎',
        data: [60, 72, 71, 74, 190, 130, 110]
    }, {
        name: '其他',
        type: 'bar',
        stack: '搜索引擎',
        data: [62, 82, 91, 84, 109, 110, 120]
    }]
};

barChart.setOption(option);

var pieChart = echarts.init(document.getElementById('pieChart'));
var option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    toolbox: {
        show: true,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            magicType: {
                show: true,
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: 1548
                    }
                }
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [{
            value: 335,
            name: '直接访问'
        }, {
            value: 310,
            name: '邮件营销'
        }, {
            value: 234,
            name: '联盟广告'
        }, {
            value: 135,
            name: '视频广告'
        }, {
            value: 1548,
            name: '搜索引擎'
        }]
    }]
};


pieChart.setOption(option);

window.prettyPrint();
</script>
